import React, { Component } from 'react';
import Icon from '@/components/icon';
import Table from '@/components/table';
import history from '@/router/history';
import classnames from 'classnames';
import { Button } from 'antd';
import { getTodayRoom } from '@/services/index';
import css from './index.module.less';
import { propsType, stateType } from './data';
// live_room直播中
class Index extends Component<propsType, stateType> {
  constructor(props:any) {
    super(props);
    this.state = {
      columns: [
        {
          title: '排行',
          align: 'center',
          render: (text:any, record:any, index:number) => {
            return (
              <div className={css.number}>
                <span>{index + 1}</span>
              </div>
            );
          },
        },
        {
          title: '直播',
          dataIndex: 'title',
          key: 'title',
          render: (text:any, record:any, index:number) => {
            return (
              <div className={css.titlebox}>
                <img src={record.cover} alt="" />
                <span>{record.title}</span>
              </div>
            );
          },
        },
        {
          title: '达人',
          dataIndex: 'nickname',
          key: 'nickname',
          render: (text:any, record:any, index:number) => {
            return (
              <div className={css.headerimg} onClick={() => history.push(`/user/${record.uid}`)}>
                <div className={classnames(css.img)}>
                  <img src={record.avatar} alt="" className={classnames(css.img, `${record.live_room ? css.active : ''}`)} />
                  {
                  record.live_room ? (
                    <div className={css.live}>
                      <Icon type="icon-zu5kaobei2" style={{ fontSize: 'px', color: '#fff' }} />
                    </div>
                  ) : null
                }
                </div>
                <span>{record.nickname}</span>
              </div>
            );
          },
        },
        {
          title: '销量（件）',
          dataIndex: 'sell_num',
          key: 'sell_num',
        },
        {
          title: '销售额（元）',
          dataIndex: 'gmv',
          key: 'gmv',
        },
        {
          title: '带货热度',
          dataIndex: 'total_count',
          key: 'total_count',
        },
        {
          title: '人气峰值',
          dataIndex: 'max_online',
          key: 'max_online',
        },
        {
          title: '商品数',
          dataIndex: 'product_num',
          key: 'product_num',
        },
        {
          title: '粉丝数',
          dataIndex: 'fs',
          key: 'fs',
        },
        {
          title: '操作',
          dataIndex: 'tags',
          key: 'tags',
          align: 'center',
          render: (text:any, record:any, index:number) => {
            return <Button type="link" onClick={() => history.push(`/data/${record.roomId}`)}>数据大屏</Button>;
          },
        },
      ],
      dataSource: [],
      page: 1,
      size: 10,
      total: 0,
      loading: false,
      orders: [
        {
          filed: 'gmv',
        },
        {
          order: 'desc',
        },
      ],
    };
  }

  componentDidMount() {
    this.getDataList();
  }

  sort = () => {
    const { orders } = this.state;
    if (orders[1].order === 'desc') {
      orders[1].order = 'esc';
    } else {
      orders[1].order = 'desc';
    }
    this.getDataList();
  }

  //
  getDataList = () => {
    const {
      page, size, loading, orders,
    } = this.state;
    this.setState({
      loading: true,
    });
    getTodayRoom({
      page,
      size,
      orders,
      region: 30,
    }).then((res) => {
      if (res.code === 'Success') {
        this.setState({
          loading: false,
          total: res.data.total,
          dataSource: res.data.list,
        });
      }
    });
  }

  pageChange = (page:number, size:number) => {
    // console.log(page, size);
    this.setState({
      page,
      size,
    }, () => {
      this.getDataList();
    });
  }

  render() {
    const {
      columns, dataSource, page, total, size, loading, orders,
    } = this.state;
    return (
      <div className={css.content}>
        <div className={css.box}>
          <div className={css.sortbox}>
            <div className={css.sort} onClick={() => this.sort()}>
              直播销售额排序
              {
                orders[1].order === 'desc' ? <Icon type="icon-sort-ascending" style={{ fontSize: '16px' }} /> : <Icon type="icon-sort-descending" style={{ fontSize: '16px' }} />
              }
            </div>
            <div>
              榜单数据每小时计算一次
            </div>
          </div>
          <div className={css.table}>
            <Table
              columns={columns}
              dataSource={dataSource}
              loading={loading}
              pagination={{
                current: page,
                total,
                size,
                showSizeChanger: true,
                showQuickJumper: true,
                showTotal: (total: number) => `共 ${total} 条`,
                onChange: (page: any, pageSize: any) => this.pageChange(page, pageSize),
              }}
            />
          </div>
        </div>
      </div>
    );
  }
}

export default Index;
